<template>
  <div>
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <!-- <el-col :span="8">
          <el-input placeholder="请输入搜索内容" v-model="searchQuery" clearable>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col> -->
        <el-col :span="4" :offset="0">
          <el-button type="primary" size="mini" @click="add">添加用户</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" :header-cell-style="{ background: 'rgb(242, 243, 244)', color: '#515a6e' }">

      <el-table-column prop="username" label="用户名称" >
      </el-table-column>

      <el-table-column prop="email" label="邮箱" >
      </el-table-column>

      <el-table-column prop="phone" label="手机号码" >
      </el-table-column>

      <el-table-column prop="status" label="帐号状态">
    <template #default="scope">
      <span v-if="scope.row.status === 1" style="color: green;">正常</span>
      <span v-else style="color: red;">停用</span>
    </template>
  </el-table-column>

      <el-table-column prop="password" label="密码" >
      </el-table-column>


      <!-- <el-table-column :formatter="dateFormat" prop="last_login_time" label="上次登录时间" width="180">
      </el-table-column> -->

 <el-table-column label="操作">
    <!-- 使用 slot-scope 获取 row -->
    <template slot-scope="scope">
      <el-button size="mini" type="primary" @click="update(scope.row)">
        禁用账号
      </el-button>
    </template>
  </el-table-column>
    </el-table>

    <div style="margin-top:20px;float:right;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :current-page="currentPage" background layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 添加/编辑/查看用户对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px">
      <el-form  :model="user" ref="userForm">
        <el-form-item style="display:none;" label="id" prop="id">
          <el-input v-model="user.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名称：" label-width="100px" prop="username">
          <el-input :disabled="dialogInputButtonVisible" v-model="user.username" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号：" label-width="100px" :style="usernameDisplay" prop="phone">
          <el-input :disabled="dialogInputButtonVisible" v-model="user.phone" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码：" label-width="100px" prop="password">
          <el-input :disabled="dialogInputButtonVisible" v-model="user.password" type="password" clearable></el-input>
        </el-form-item>

         <el-form-item label="邮箱" label-width="100px" prop="email">
          <el-input :disabled="dialogInputButtonVisible" v-model="user.email"  clearable></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" :disabled="dialogInputButtonVisible">取 消</el-button>
        <el-button type="primary" @click="submit('userForm')" :disabled="dialogInputButtonVisible">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formatDate from '../utils/dateUtil.js';
export default {
  methods: {
    update(e){
        const that=this
        that.$http
              .post('/authority/banWxUser',{phone:e.phone})
              .then(function (response) {
                if (response.data.code == 200) {
                  that.$message({
                    showClose: true,
                    type: 'success',
                    message: '操作成功'
                  });
                  that.getALLwxNormalUser(that.currentPage, that.pageSize);
                  that.dialogFormVisible = false;
                }
              })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getALLwxNormalUser(this.currentPage, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getALLwxNormalUser(this.currentPage, this.pageSize);
    },
    search() {
      this.currentPage = 1;
      this.getALLwxNormalUser(this.currentPage, this.pageSize);
    },
    add() {
      this.title = "添加用户";
      this.user = {
        username: "",
        password: "",
        email:"",
        phone:""
      };
      this.dialogFormVisible = true;
      this.dialogInputButtonVisible = false;
      this.usernameDisplay = "";
    },

    submit(){
      const that=this
        that.$http
              .post('/authority/addWxUser', that.user)
              .then(function (response) {
                if (response.data.code == 200) {
                  that.$message({
                    showClose: true,
                    type: 'success',
                    message: '操作成功'
                  });
                  that.getALLwxNormalUser(that.currentPage, that.pageSize);
                  that.dialogFormVisible = false;
                }
              })
    },



    del(row) {
      const that = this;
      that.$confirm('是否删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var curId = row.id;
        that.$http
          .post('/authority/deleteUser', {
            "id": curId
          })
          .then(function (response) {
            if (response.data.code == 200) {
              that.$message({
                showClose: true,
                type: 'success',
                message: '操作成功'
              });
              that.currentPage = 1;
              that.getALLwxNormalUser(1, that.pageSize);
            }
          })
      });
    },


    getALLwxNormalUser(currentPage, pageSize) {
      const that = this;
      var param = new URLSearchParams();
      param.append("page", currentPage);
      param.append("limit", pageSize);
      if (that.searchQuery) {
        param.append("query", that.searchQuery);
      }
      this.$http
        .get('/authority/getUserPage', {
          params: param
        })
        .then(function (response) {
          if (response.data.code == 200) {
            that.tableData = response.data.data;
            that.total = response.data.count;
          }
        })
    },
    getRoleAll() {
      const that = this;
      this.$http
        .get('/authority/getRoleAll')
        .then(function (response) {
          if (response.data.code == 200) {
            that.roleList = response.data.data;
          }
        })
    },
    dateFormat(row, column) {
      if (row[column.property] == null) {
        return "";
      }
      let date = new Date(row[column.property]);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    },
    getDepartmentData() {
      const that = this;
      this.$http
        .get('/authority/getDepartmentTree')
        .then(function (response) {
          if (response.data.code == 200) {
            that.departmentData = response.data.data;
          }
        })
    },
    handleChange(itemIdArr) {
      if (itemIdArr && itemIdArr.length > 0) {
        //获取最后一个id
        var val = itemIdArr[itemIdArr.length - 1];
        this.user.departmentid = val;
      } else {
        this.user.departmentid = "";
      }
    },
    changeStatus(row) {
      const that = this;
      this.$http
        .post('/authority/updateUserStatus', {
          id: row.id,
          status: row.status
        })
        .then(function (response) {
          if (response.data.code != 200) {
            // 如果更新失败，回滚状态
            row.status = !row.status;
            that.$message({
              showClose: true,
              type: 'error',
              message: '更新状态失败'
            });
          }
        })
    }
    ,
    getALLwxNormalUser(currentPage, pageSize){
      const that = this;
      var param = new URLSearchParams();
      param.append("page", currentPage);
      param.append("limit", pageSize);
      this.$http
        .get('/authority/getALLwxNormalUser', {
          params: param
        })
        .then(function (response) {
          if (response.data.code == 200) {
            console.log(response.data.data)
            that.tableData = response.data.data;
            that.total = response.data.count;
          }
        })
    }
  },
  mounted() {
    this.getALLwxNormalUser(this.currentPage, this.pageSize);

  },
  data() {
    return {
      user: {
        id: "",
        name: "",
        username: "",
        password: "",
        userRoleList: [],
        departmentid: ""
      },
      title: "",
      usernameDisplay: "",
      dialogInputButtonVisible: false,
      dialogFormVisible: false,
      total: 0,
      pageSize: 5,
      currentPage: 1,
      tableData: [],
      roleList: [],
      departmentData: [],
      searchQuery: "",
      isEditable: true
    }
  }
}
</script>
<style>
.el-select .el-tag__close.el-icon-close {
  color: #fff !important;
}
</style>
